<template>
  <div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 面包屑导航 -->
    

      <!-- 新闻详情 -->
      <div class="bg-white rounded-lg  overflow-hidden">
        <!-- 标题区域 -->
        <div class="px-8 py-6 border-b border-gray-200">
          <h1 class="text-3xl font-bold text-gray-900 mb-4 text-center">
            {{ newsDetail.title }}
          </h1>
          <div class="flex justify-center items-center text-sm text-gray-500">
            <span>Published: {{ formatDate(newsDetail.createTime) }}</span>
          </div>
        </div>

        <!-- 内容区域 -->
        <div class="px-8 py-8">
          <div v-if="loading" class="text-center py-12">
            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
            <p class="mt-4 text-gray-600">Loading...</p>
          </div>
          
          <div v-else-if="error" class="text-center py-12">
            <p class="text-red-600">{{ error }}</p>
          </div>
          
          <div v-else-if="newsDetail.detailed" class="prose prose-lg max-w-none">
            <div v-html="newsDetail.detailed"></div>
          </div>
          
          <div v-else class="text-center py-12">
            <p class="text-gray-600">No content available</p>
          </div>
        </div>
      </div>

      <!-- 返回按钮 -->
    
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { newsApi } from '~/public/utils/api'

const route = useRoute()
const newsDetail = ref({})
const loading = ref(true)
const error = ref('')

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

// 获取新闻详情
const fetchNewsDetail = async () => {
  try {
    loading.value = true
    error.value = ''
    
    const newsId = route.params.id
    if (!newsId) {
      error.value = 'News ID is required'
      return
    }

    const result = await newsApi.getDetail(Number(newsId))
    if (result.data) {
      // ⚠️ 修复：将 &nbsp; 替换为普通空格，解决文本折行问题
      newsDetail.value = {
        ...result.data,
        detailed: (result.data.detailed || '').replace(/&nbsp;/g, ' ')
      }
    } else {
      error.value = 'News not found'
    }
  } catch (err) {
    console.error('Failed to fetch news detail:', err)
    error.value = 'Failed to load news detail'
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  await fetchNewsDetail()
})

// 设置页面标题
useHead({
  title: computed(() => newsDetail.value.title ? `${newsDetail.value.title} - News` : 'News Detail'),
  meta: [
    {
      name: 'description',
      content: computed(() => newsDetail.value.title || 'News detail page')
    }
  ]
})
</script>

<style scoped>
.prose {
  color: #374151;
  line-height: 1.75;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: #111827;
  font-weight: 600;
  margin-top: 2em;
  margin-bottom: 1em;
}

.prose p {
  margin-bottom: 1.25em;
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.375rem;
  margin: 1.5em 0;
}

.prose a {
  color: #2563eb;
  text-decoration: underline;
}

.prose a:hover {
  color: #1d4ed8;
}

.prose ul, .prose ol {
  margin-bottom: 1.25em;
  padding-left: 1.5em;
}

.prose li {
  margin-bottom: 0.5em;
}

.prose blockquote {
  border-left: 4px solid #e5e7eb;
  padding-left: 1em;
  margin: 1.5em 0;
  font-style: italic;
  color: #6b7280;
}
</style> 